import { memo } from "react"
import styled from "@emotion/styled"
import { useModalSlideUp } from "@/features/useModal"
import ButtonRegular from "@/components/composite/ButtonRegular/main"
import { WalletAccountType } from "@/features/business/WithdrawAccounts/useGetAccounts"
import AccountCard from "@/pages/WithdrawAccounts/components/AccountCard"
import { useNavigate } from "react-router-dom"
import { PATHS } from "@/router/routes"
import { SvgComponent } from "@/components/base/Svg"

const Container = styled.div`
    width: 100%;
    height: 480rem;
    max-height: 90vh;
    position: relative;
    padding: 16rem;
    border-top-left-radius: 12rem;
    border-top-right-radius: 12rem;
    background-color: #f2f2f3f2;
`

const ContainerTitle = styled.div`
    font-family: "Gilroy";
    font-weight: 500;
    font-size: 18rem;
    letter-spacing: 0%;
    text-align: center;
    height: 28rem;
    margin-bottom: 16rem;
    color: #131416;
`
const DetailClose = styled(SvgComponent("pages/UserCenterPage/deposit/close.svg"))`
    width: 24rem;
    height: 24rem;
    position: absolute;
    top: 16rem;
    right: 16rem;
`
const ContentWarp = styled.div`
    font-family: "Gilroy";
    font-weight: 500;
    font-size: 18rem;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8rem;
`

const BottomBlock = styled.div`
    padding: 16rem 0 32rem;
    width: 100%;
`
const SubmitButton = styled(ButtonRegular)`
    width: 100%;
    height: 40rem;
    line-height: 40rem;
    font-weight: 500;
    font-size: 16rem;
    text-align: center;
    box-shadow: none;
`
const SubmitButtonContent = styled.div`
    width: 100%;
    height: 40rem;
    line-height: 40rem;
    font-family: "SF Pro Text";
    font-weight: 500;
    font-size: 16rem;
    color: #ff1f57;
    display: flex;
    align-items: center;
    position: relative;
    img {
        width: 16rem;
        height: 16rem;
        position: absolute;
        left: 16rem;
        top: 50%;
        transform: translateY(-50%);
    }
    span {
        flex: 1;
        text-align: center;
    }
`

const SubmitButtonSvg = styled(SvgComponent("pages/UserCenterPage/withdraw/add_borderless.svg"))`
    width: 16rem;
    height: 16rem;
    position: absolute;
    left: 16rem;
    top: 50%;
    transform: translateY(-50%);
`

export interface SelectWithdrawAccountProps {
    accounts: WalletAccountType[]
    selectedAccount?: WalletAccountType
    onSelect: (account: WalletAccountType) => void
}

function SelectWithdrawAccount(props: SelectWithdrawAccountProps) {
    const { accounts = [], onSelect, selectedAccount } = props

    const navigator = useNavigate()
    const { close: closeModal } = useModalSlideUp("account-page")
    const { close } = useModalSlideUp("search-action")

    return (
        <Container>
            <ContainerTitle>Select Withdraw Account</ContainerTitle>
            <DetailClose onClick={closeModal} />
            <ContentWarp>
                {accounts.map((item, index) => (
                    <AccountCard
                        key={item.id}
                        data={item}
                        isSelected={item.id === selectedAccount?.id}
                        onClick={() => {
                            onSelect(item)
                            closeModal()
                        }}
                    />
                ))}
            </ContentWarp>
            {/* <BottomBlock>
                <SubmitButton
                    variant={{
                        type: "solid",
                        backgroundColorLeft: "#fff",
                        backgroundColorRight: "#fff",
                    }}
                >
                    <SubmitButtonContent
                        onClick={() => {
                            navigator(PATHS.WITHDRAW_ACCOUNTS)
                            closeModal()
                            close()
                        }}
                    >
                        <SubmitButtonSvg />
                        <span>Add Withdraw Account</span>
                    </SubmitButtonContent>
                </SubmitButton>
            </BottomBlock> */}
        </Container>
    )
}

export default memo(SelectWithdrawAccount)
